<!--
 * @Author: linjituan linjituan@revolution.com
 * @Date: 2024-10-08 19:29:28
 * @LastEditors: linjituan linjituan@revolution.com
 * @LastEditTime: 2024-10-10 20:18:21
 * @FilePath: \hm-twx-admin\src\components\Tarbar\src\basicTarbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="tarbar-wrap">
    <div class="tarbar-block"></div>
    <div class="tarbar-content">
      <div class="tarbar-item" :class="{ 'tarbar-active': route.path === item.path }" v-for="item in props.list" :key="item.name">
        <div class="tarbar-icon">
          <i class="iconfont" :class="item.icon"></i>
        </div>
        <div class="tarbar-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { tarbarProps } from "./props";

const route = useRoute();
console.log('route ***', route)
const props = defineProps(tarbarProps);
</script>

<style lang="less" scoped>
.tarbar-wrap {
  .tarbar-block {
    height: 60px;
  }

  .tarbar-content {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    // justify-content: space-around;
    height: 60px;
    color: #fff;
    background-color: #000;
    border-top: 1px solid rgb(47 51 54);
    // box-shadow: 0 -2px 4px rgb(0 0 0 / 10%);

    .tarbar-item {
      flex: 1;
      text-align: center;
    }

    .tarbar-active {
      color: #00b1ff;
    }
  }
}
</style>